<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Nav</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="/dist/ionic.js"></script>
</head>
<body>
  <ion-app>
    <ion-nav root="page-one"></ion-nav>
  </ion-app>
</body>

<script>

  class PageOne extends HTMLElement {
    async connectedCallback() {
      this.innerHTML = `

        <ion-header>
          <ion-toolbar>
            <ion-title>Page One</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content padding>
          <h1>Page One</h1>
          <ion-button class="next">Go to Page Two</ion-button>
        </ion-content>`;

      const button = this.querySelector('ion-button');
      button.addEventListener('click', async () => {
        this.closest('ion-nav').push('page-two');
      });
    }
  }

  class PageTwo extends HTMLElement {
    async connectedCallback() {
      this.innerHTML = `

          <ion-header>
            <ion-toolbar>
              <ion-title>Page Two</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content padding>
            <h1>Page Two</h1>
            <ion-button class="next">Go to Page Three</ion-button>
            <ion-button class="previous">Go Back</ion-button>
          </ion-content>`;

      const previousButton = this.querySelector('ion-button.previous');
      previousButton.addEventListener('click', async () => {
        await this.closest('ion-nav').pop();
      });

      const nextButton = this.querySelector('ion-button.next');
      nextButton.addEventListener('click', async () => {
        await this.closest('ion-nav').push('page-three');
      });
    }
  }

  class PageThree extends HTMLElement {
    async connectedCallback() {
      this.innerHTML = `

          <ion-header>
            <ion-toolbar>
              <ion-title>Page Three</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content padding>
            <h1>Page Three</h1>
            <ion-button class="previous">Go Back</ion-button>
          </ion-content>`;

      const previousButton = this.querySelector('ion-button.previous');
      previousButton.addEventListener('click', async () => {
        await this.closest('ion-nav').pop();
      });
    }
  }

  customElements.define('page-one', PageOne);
  customElements.define('page-two', PageTwo);
  customElements.define('page-three', PageThree);

</script>
</html>
